import React, { Component } from 'react';
import { CloseOutlined,RightOutlined } from '@ant-design/icons';
import { Rate } from 'antd';

import './Header.scss'
class Header extends Component {
    constructor(props) {
        super(props);
        this.state = {
            showMask:false
            // sellerData:{}
        }
    }

    maskControl = (e,status) =>{
        this.setState({
            showMask:status
        })
    }
    render() { 
        return ( 
            <div className="header">
                <div className="bg"></div>
                <div className="body">
                    <div className="image">
                        <img alt="" src={this.props.sellerData.avatar}></img>
                    </div>
                    <div className="desc">
                        <div className="shopname">
                            <img className="tag" alt="" src={require('../../../../static/image/brand@3x.png').default}/>
                            <span className="text">{this.props.sellerData.name}</span>
                        </div>
                        <div className="delivery">{this.props.sellerData.description}</div>
                        {/* this.props.sellerData.supports[0].description */}
                        <div className="sale">
                            <img className="tag" alt="" src={require('../../../../static/image/decrease_2@3x.png').default}/>
                            <span className="text">下单餐免费送再塞200块钱给你</span>
                        </div>
                    </div>
                    <div className="offerbtn" data-status="true" onClick={(e)=>{this.maskControl(e,true)}}>
                        <div className="btn">5个<RightOutlined /></div>
                    </div>
                </div>
                <div className="notice">
                    <img className="tag" alt="" src={require('../../../../static/image/bulletin@3x.png').default}/>
                    <span className="text">今天天气不错 适合来一份皮蛋瘦肉粥</span>
                </div>

                {this.state.showMask == true ?
                    <div className="mask"  >
                        <div className="content">
                            <div className="shopname">{this.props.sellerData.name}</div>
                            <div className="rates">
                                <Rate className="star-style" disabled defaultValue={this.props.sellerData.serviceScore} />
                            </div>
                            <div className="block-title">
                                <div className="line"></div>
                                <div className="names">优惠信息</div>
                                <div className="line"></div>
                            </div>
                            <div className="discounts-title">
                                {
                                    this.props.sellerData.supports?this.props.sellerData.supports.map((el,index)=>{
                                            return(
                                                <div className="discounts" key={index}>{el.description}</div>  
                                            )
                                        }):''
                                }
                            </div>
                            <div className="block-title">
                                <div className="line"></div>
                                <div className="names">商家公告</div>
                                <div className="line"></div>
                            </div>
                            <div className="description">
                                {this.props.sellerData.bulletin}
                            </div>
                        </div>
                        <div className="close">
                            <CloseOutlined onClick={(e)=>{this.maskControl(e,false)}} className="icon" />
                        </div>
                    </div>
                    :''
                }
                
            </div>
         );
    }
}
export default Header;